<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>字体、动画、阴影 | winnnntttter</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7ae3e8df51439cebe7b2a43bccd0b253";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
      </script>
    <meta name="description" content="winnnntttter的个人站">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="preload" href="/assets/css/0.styles.a3a399df.css" as="style"><link rel="preload" href="/assets/js/app.419c42a0.js" as="script"><link rel="preload" href="/assets/js/3.2e7f4496.js" as="script"><link rel="preload" href="/assets/js/19.8a4801fa.js" as="script"><link rel="prefetch" href="/assets/js/10.bd166216.js"><link rel="prefetch" href="/assets/js/100.ef6c4e60.js"><link rel="prefetch" href="/assets/js/101.d01225fc.js"><link rel="prefetch" href="/assets/js/102.b85e1bb3.js"><link rel="prefetch" href="/assets/js/103.efa64f76.js"><link rel="prefetch" href="/assets/js/104.e62be1cd.js"><link rel="prefetch" href="/assets/js/105.4db56e9c.js"><link rel="prefetch" href="/assets/js/106.f6ccef65.js"><link rel="prefetch" href="/assets/js/11.705ff9c2.js"><link rel="prefetch" href="/assets/js/12.7f08fe83.js"><link rel="prefetch" href="/assets/js/13.c9276fff.js"><link rel="prefetch" href="/assets/js/14.03705b05.js"><link rel="prefetch" href="/assets/js/15.a39a18a1.js"><link rel="prefetch" href="/assets/js/16.ecd9a98c.js"><link rel="prefetch" href="/assets/js/17.cfa099fe.js"><link rel="prefetch" href="/assets/js/18.be92763c.js"><link rel="prefetch" href="/assets/js/20.bfc1f073.js"><link rel="prefetch" href="/assets/js/21.08ea81e0.js"><link rel="prefetch" href="/assets/js/22.635463a2.js"><link rel="prefetch" href="/assets/js/23.fcf1e19e.js"><link rel="prefetch" href="/assets/js/24.e4fe2627.js"><link rel="prefetch" href="/assets/js/25.c64ebd97.js"><link rel="prefetch" href="/assets/js/26.b83aa917.js"><link rel="prefetch" href="/assets/js/27.9c0001f7.js"><link rel="prefetch" href="/assets/js/28.467acfc5.js"><link rel="prefetch" href="/assets/js/29.b88eaf80.js"><link rel="prefetch" href="/assets/js/30.79fca896.js"><link rel="prefetch" href="/assets/js/31.f0b09253.js"><link rel="prefetch" href="/assets/js/32.680d05e2.js"><link rel="prefetch" href="/assets/js/33.06db5f96.js"><link rel="prefetch" href="/assets/js/34.9b7ffb83.js"><link rel="prefetch" href="/assets/js/35.b302d83e.js"><link rel="prefetch" href="/assets/js/36.8ce84d21.js"><link rel="prefetch" href="/assets/js/37.8f1286d0.js"><link rel="prefetch" href="/assets/js/38.0eba62cc.js"><link rel="prefetch" href="/assets/js/39.9eafaf04.js"><link rel="prefetch" href="/assets/js/4.10fce449.js"><link rel="prefetch" href="/assets/js/40.94e167a7.js"><link rel="prefetch" href="/assets/js/41.9b634e18.js"><link rel="prefetch" href="/assets/js/42.a3ad7d5f.js"><link rel="prefetch" href="/assets/js/43.9ad38a47.js"><link rel="prefetch" href="/assets/js/44.1d5a8a2c.js"><link rel="prefetch" href="/assets/js/45.45af274c.js"><link rel="prefetch" href="/assets/js/46.45a0da7e.js"><link rel="prefetch" href="/assets/js/47.e31b4c4f.js"><link rel="prefetch" href="/assets/js/48.2b1a4ffb.js"><link rel="prefetch" href="/assets/js/49.e4a82034.js"><link rel="prefetch" href="/assets/js/5.edc6b3fb.js"><link rel="prefetch" href="/assets/js/50.8b0a75d7.js"><link rel="prefetch" href="/assets/js/51.fb58d1f2.js"><link rel="prefetch" href="/assets/js/52.aba39728.js"><link rel="prefetch" href="/assets/js/53.d683a969.js"><link rel="prefetch" href="/assets/js/54.c91b9f4c.js"><link rel="prefetch" href="/assets/js/55.76d17213.js"><link rel="prefetch" href="/assets/js/56.5935f2ad.js"><link rel="prefetch" href="/assets/js/57.65d32203.js"><link rel="prefetch" href="/assets/js/58.0b637d75.js"><link rel="prefetch" href="/assets/js/59.4f569adb.js"><link rel="prefetch" href="/assets/js/6.fe59ecb4.js"><link rel="prefetch" href="/assets/js/60.3f56e6a2.js"><link rel="prefetch" href="/assets/js/61.a6beb596.js"><link rel="prefetch" href="/assets/js/62.db0af84e.js"><link rel="prefetch" href="/assets/js/63.1d585303.js"><link rel="prefetch" href="/assets/js/64.3861310e.js"><link rel="prefetch" href="/assets/js/65.9b1ef5df.js"><link rel="prefetch" href="/assets/js/66.dd5713f3.js"><link rel="prefetch" href="/assets/js/67.fa823bb5.js"><link rel="prefetch" href="/assets/js/68.ae4e8b4f.js"><link rel="prefetch" href="/assets/js/69.b36498fb.js"><link rel="prefetch" href="/assets/js/7.04e3d394.js"><link rel="prefetch" href="/assets/js/70.8f75877a.js"><link rel="prefetch" href="/assets/js/71.8b54fe2e.js"><link rel="prefetch" href="/assets/js/72.7892e629.js"><link rel="prefetch" href="/assets/js/73.41e6a3ad.js"><link rel="prefetch" href="/assets/js/74.a8d720c9.js"><link rel="prefetch" href="/assets/js/75.677c8235.js"><link rel="prefetch" href="/assets/js/76.9c7df0e7.js"><link rel="prefetch" href="/assets/js/77.1e4ef451.js"><link rel="prefetch" href="/assets/js/78.503ea59d.js"><link rel="prefetch" href="/assets/js/79.e473582d.js"><link rel="prefetch" href="/assets/js/8.35d757ca.js"><link rel="prefetch" href="/assets/js/80.71d04c61.js"><link rel="prefetch" href="/assets/js/81.36d69e64.js"><link rel="prefetch" href="/assets/js/82.9491f2b1.js"><link rel="prefetch" href="/assets/js/83.d9808b8b.js"><link rel="prefetch" href="/assets/js/84.e0231735.js"><link rel="prefetch" href="/assets/js/85.ddc29777.js"><link rel="prefetch" href="/assets/js/86.05cd7dc6.js"><link rel="prefetch" href="/assets/js/87.1e74cca5.js"><link rel="prefetch" href="/assets/js/88.957d6dbb.js"><link rel="prefetch" href="/assets/js/89.b216c556.js"><link rel="prefetch" href="/assets/js/9.07b2db50.js"><link rel="prefetch" href="/assets/js/90.0c71a3f2.js"><link rel="prefetch" href="/assets/js/91.038eb70a.js"><link rel="prefetch" href="/assets/js/92.f05b7ced.js"><link rel="prefetch" href="/assets/js/93.e1cd3406.js"><link rel="prefetch" href="/assets/js/94.fe506104.js"><link rel="prefetch" href="/assets/js/95.440323e0.js"><link rel="prefetch" href="/assets/js/96.9ee51a0b.js"><link rel="prefetch" href="/assets/js/97.826f8538.js"><link rel="prefetch" href="/assets/js/98.15cf8919.js"><link rel="prefetch" href="/assets/js/99.489906fc.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.f879b1e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a3a399df.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/logo.jpg" alt="winnnntttter" class="logo"> <span class="site-name">winnnntttter</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-submenu-selected"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🍃前端
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/Flutter/">
          🌿Flutter
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🌱其他
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="https://jsbin.com/" target="_blank">
          🏃‍♂️运行
          <i aria-label="icon: link" class="anticon anticon-link"><svg viewBox="64 64 896 896" focusable="false" data-icon="link" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></i></a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🌈联系
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <a href="https://github.com/winnnntttter/winnnntttter.github.io" target="_blank" rel="noopener noreferrer" class="repo-link"><i aria-label="icon: github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></i></a></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/front-end/html+css/" aria-current="page" title="html+css" class="sidebar-link">html+css</a></li><li><a href="/front-end/html+css/css env 和 var.html" title="css env 和 var" class="sidebar-link">css env 和 var</a></li><li><a href="/front-end/html+css/flex-float-right无效.html" title="flex-float-right无效" class="sidebar-link">flex-float-right无效</a></li><li><a href="/front-end/html+css/line-height和vertical-align.html" title="line-height和vertical-align" class="sidebar-link">line-height和vertical-align</a></li><li><a href="/front-end/html+css/取消事件、mask-image、文字渐变.html" title="取消事件、mask-image、文字渐变" class="sidebar-link">取消事件、mask-image、文字渐变</a></li><li><a href="/front-end/html+css/图片显示中间部分.html" title="图片显示中间部分" class="sidebar-link">图片显示中间部分</a></li><li><a href="/front-end/html+css/字体、动画、阴影.html" title="字体、动画、阴影" class="active sidebar-link">字体、动画、阴影</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/html+css/字体、动画、阴影.html#字体" title="字体" class="sidebar-link">字体</a></li><li class="sidebar-sub-header"><a href="/front-end/html+css/字体、动画、阴影.html#动画" title="动画" class="sidebar-link">动画</a></li><li class="sidebar-sub-header"><a href="/front-end/html+css/字体、动画、阴影.html#背景渐变色" title="背景渐变色" class="sidebar-link">背景渐变色</a></li><li class="sidebar-sub-header"><a href="/front-end/html+css/字体、动画、阴影.html#变形" title="变形" class="sidebar-link">变形</a></li><li class="sidebar-sub-header"><a href="/front-end/html+css/字体、动画、阴影.html#shadow" title="shadow" class="sidebar-link">shadow</a></li><li class="sidebar-sub-header"><a href="/front-end/html+css/字体、动画、阴影.html#响应式" title="响应式" class="sidebar-link">响应式</a></li></ul></li><li><a href="/front-end/html+css/字体文件处理.html" title="字体文件处理" class="sidebar-link">字体文件处理</a></li><li><a href="/front-end/html+css/背景图、按钮.html" title="背景图、按钮" class="sidebar-link">背景图、按钮</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="字体、动画、阴影"><a href="#字体、动画、阴影" class="header-anchor">#</a> 字体、动画、阴影</h1> <h2 id="字体"><a href="#字体" class="header-anchor">#</a> 字体</h2> <ol><li><p><a href="http://fontawesome.io/" target="_blank" rel="noopener noreferrer">http://fontawesome.io/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>谷歌字体网址：<a href="http://www.google.com/fonts/" target="_blank" rel="noopener noreferrer">http://www.google.com/fonts/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><ol start="3"><li><p>字体转换网址：<a href="http://www.font2web.com/" target="_blank" rel="noopener noreferrer">http://www.font2web.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <a href="http://www.freefontconverter.com/" target="_blank" rel="noopener noreferrer">http://www.freefontconverter.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>定义字体</p></li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> munro<span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../fonts/Munro.eot<span class="token punctuation">)</span></span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../fonts/Munro.otf<span class="token punctuation">)</span></span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../fonts/Munro.svg<span class="token punctuation">)</span></span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../fonts/Munro.ttf<span class="token punctuation">)</span></span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../fonts/Munro.woff<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h2> <ol><li>定义帧动画</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@keyframes</span> cloud</span> <span class="token punctuation">{</span>
  <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 0px #fff<span class="token punctuation">,</span> 0 0 0px #fff<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">25%</span> <span class="token punctuation">{</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 10px #fff<span class="token punctuation">,</span> 0 0 0px #fff<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">50%</span> <span class="token punctuation">{</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 0px #fff<span class="token punctuation">,</span> 0 0 20px #fff<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">75%</span> <span class="token punctuation">{</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 10px #fff<span class="token punctuation">,</span> 0 0 20px #fff<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 0px #fff<span class="token punctuation">,</span> 0 0 0px #fff<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>引用帧动画</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">one i</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> cloud 4s infinite alternate<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="背景渐变色"><a href="#背景渐变色" class="header-anchor">#</a> 背景渐变色</h2> <ol><li>线性渐变 Background-image:linear-gradient(方向值，颜色，颜色 1，范围 1，颜色 2，范围 2);要觉得渐变的不够，再复制几份</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>60deg<span class="token punctuation">,</span> #9dc66a<span class="token punctuation">,</span> #4fa59a<span class="token punctuation">,</span> #4361c3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-moz-linear-gradient</span><span class="token punctuation">(</span>60deg<span class="token punctuation">,</span> #9dc66a<span class="token punctuation">,</span> #4fa59a<span class="token punctuation">,</span> #4361c3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-ms-linear-gradient</span><span class="token punctuation">(</span>60deg<span class="token punctuation">,</span> #9dc66a<span class="token punctuation">,</span> #4fa59a<span class="token punctuation">,</span> #4361c3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-o-linear-gradient</span><span class="token punctuation">(</span>60deg<span class="token punctuation">,</span> #9dc66a<span class="token punctuation">,</span> #4fa59a<span class="token punctuation">,</span> #4361c3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>60deg<span class="token punctuation">,</span> #9dc66a<span class="token punctuation">,</span> #4fa59a<span class="token punctuation">,</span> #4361c3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>圆心渐变</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>at top<span class="token punctuation">,</span> red<span class="token punctuation">,</span> green<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="变形"><a href="#变形" class="header-anchor">#</a> 变形</h2> <ol><li>hover</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> all 0.5s ease<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 10px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 0 20px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 0 30px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 0 40px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.8<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>3d 骰子</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul</span> <span class="token punctuation">{</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">-webkit-perspective</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token property">-webkit-perspective-origin</span><span class="token punctuation">:</span> 50% 50%<span class="token punctuation">;</span>
  <span class="token property">-webkit-transform-style</span><span class="token punctuation">:</span> preserve-3d<span class="token punctuation">;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> run 2s infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(1)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>237<span class="token punctuation">,</span> 64<span class="token punctuation">,</span> 123<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(2)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>212<span class="token punctuation">,</span> 65<span class="token punctuation">,</span> 227<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(3)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>70<span class="token punctuation">,</span> 146<span class="token punctuation">,</span> 216<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(4)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>88<span class="token punctuation">,</span> 240<span class="token punctuation">,</span> 253<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(5)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>48<span class="token punctuation">,</span> 215<span class="token punctuation">,</span> 160<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>-100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:nth-child(6)</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="3"><li>一个按钮</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box a:before</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>248<span class="token punctuation">,</span> 244<span class="token punctuation">,</span> 244<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box a:hover:before</span> <span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skewX</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span> <span class="token function">scaleX</span><span class="token punctuation">(</span>300<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>三角形</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.div1</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 20px solid red<span class="token punctuation">;</span>
  <span class="token property">border-right</span><span class="token punctuation">:</span> 20px solid green<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 20px solid yellow<span class="token punctuation">;</span>
  <span class="token property">border-left</span><span class="token punctuation">:</span> 20px solid purple<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="shadow"><a href="#shadow" class="header-anchor">#</a> shadow</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.div1</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #9a0201<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 1px 0 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span> inset<span class="token punctuation">,</span> 0 0 0 1px #0e5983<span class="token punctuation">,</span> 0 -3px 17px 23px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 27px 16px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 10px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 0 20px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 0 30px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 0 40px <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.div2</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #bbb<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 6px black inset<span class="token punctuation">,</span> 0 0 0 2px white<span class="token punctuation">,</span> 0 0 0 4px purple<span class="token punctuation">,</span> 0 0 0 6px blue<span class="token punctuation">,</span> 0 0 0 8px green<span class="token punctuation">,</span> 0 0 0 10px yellow<span class="token punctuation">,</span> 0 0 0 12px orange<span class="token punctuation">,</span> 0 0 0 14px red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>h5/images/body-bg.jpg<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>h5/images/logo.png<span class="token punctuation">)</span></span> no-repeat left top<span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.div3</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 -2px 0 purple<span class="token punctuation">,</span> 0 -4px 0 blue<span class="token punctuation">,</span> 0 -6px 0 green<span class="token punctuation">,</span> 0 -8px 0 yellow<span class="token punctuation">,</span> 0 -10px 0 orange<span class="token punctuation">,</span> 0 -12px 0 red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="响应式"><a href="#响应式" class="header-anchor">#</a> 响应式</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 700px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">article</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">aside</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">1/28/2021, 5:29:11 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/front-end/html+css/图片显示中间部分.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        图片显示中间部分
      </a></span> <span class="next"><a href="/front-end/html+css/字体文件处理.html">
        字体文件处理
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"><!----><div id="goTop" class="hide-cat" data-v-bf92849a></div></div></div>
    <script src="/assets/js/app.419c42a0.js" defer></script><script src="/assets/js/3.2e7f4496.js" defer></script><script src="/assets/js/19.8a4801fa.js" defer></script>
  </body>
</html>